import Component from "../Component.js";


export default class Layer extends Component{
    constructor() {
        super();
    }

    modifyLayers() {
        this.config.layer = [];
        const length = this.config.layers.length;
        this.$$("#pannel-all").prop("checked", true);
        for (let i = 0; i < length; i++) {
            const checked = this.$$("#layer" + i).is(':checked');
            const layer = this.config.layers[i].layer;
            if (checked) {
                this.config.layer.push(layer);
            } else {
                this.$$("#pannel-all").prop("checked", false);
            }
        }
        this.algo.setConfig(this.config);
    }

    layerChecked(init=true, all=true) {
        this.$$("#pannel .page-content").empty();
        const div = `<div class="block"><div class="list simple-list"><ul></ul></div></div>`;
        this.$$("#pannel .page-content").append(div);
        this.$$("#pannel-all").prop("checked",true);

        const length = this.config.layers.length;
        for (let i = 0; i < length; i++) {
            const layer = this.config.layers[i].layer;
            const id = 'layer' + i;
            let checked = '';
            if (init === true) {
                if (this.config.layer.includes(layer)) {
                    checked = 'checked';
                } else {
                    this.$$("#pannel-all").prop("checked", false);
                }
            } else {
                if (all) {
                    checked = 'checked';
                } else {
                    this.$$("#pannel-all").prop("checked", false);
                }
            }
            const li = `
                <li style="font-size: var(--table-row-font-size);">
                    <span>${layer}</span>
                    <label class="toggle toggle-init color-toggle">
                        <input type="checkbox" id=${id} ${checked}>
                        <span class="toggle-icon"></span>
                    </label>
                </li>
            `;
            this.$$("#pannel ul").append(li);

            this.$$(`#${id}`).change(async () => {
                this.modifyLayers();
                await this.drawer.location();
            })
        }
    }

    template() {
        this.$$("#pannel").hide()
    }

    control() {
        this.$$("#maplayer").on("click", () => {
            this.config = this.algo.getConfig();
            if (this.config == null) {
                this.toast("当前没有地图信息,请先获取地图。");
                return
            }

            this.$$("#pannel").show();
            this.$$("#pannel-all-show").show();
            this.$$("#pannel span").text('选择图层');

            this.layerChecked(true, true);

            this.$$("#pannel-all").on("click", async (e) => {
                if( this.$$(e.target).is(':checked') ){
                    this.layerChecked(false, true);
                } else {
                    this.layerChecked(false, false);
                }
                this.modifyLayers();
                await this.drawer.location();
            })

            this.$$("#pannel-close").on("click", () => {
                this.$$("#pannel").hide();
            })
        })
    }
}